<template>
  <div class="study-plan-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <span class="title-icon">📋</span>
          学习方案
        </h1>
        <p class="page-subtitle">根据您的职位目标，为您量身定制专属学习方案</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 职位选择区域 -->
      <div class="position-selection-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="section-icon">🎯</span>
            选择目标职位
          </h2>
          <p class="section-description">请选择您希望胜任的职位，系统将为您推荐相应的学习方案</p>
        </div>

        <div class="position-categories">
          <div 
            v-for="category in positionCategories" 
            :key="category.id"
            class="position-category"
            :class="{ active: selectedCategory === category.id }"
            @click="selectCategory(category.id)"
          >
            <div class="category-icon">{{ category.icon }}</div>
            <div class="category-info">
              <h3 class="category-name">{{ category.name }}</h3>
              <p class="category-description">{{ category.description }}</p>
            </div>
            <div class="category-arrow" v-if="selectedCategory === category.id">
              <span>✓</span>
            </div>
          </div>
        </div>

        <!-- 具体职位选择 -->
        <div v-if="selectedCategory" class="specific-positions">
          <h3 class="positions-title">选择具体职位</h3>
          <div class="positions-grid">
            <div 
              v-for="position in getPositionsByCategory(selectedCategory)"
              :key="position.id"
              class="position-card"
              :class="{ selected: selectedPosition === position.id }"
              @click="selectPosition(position.id)"
            >
              <div class="position-header">
                <span class="position-icon">{{ position.icon }}</span>
                <h4 class="position-name">{{ position.name }}</h4>
              </div>
              <p class="position-description">{{ position.description }}</p>
              <div class="position-tags">
                <span 
                  v-for="tag in position.tags" 
                  :key="tag"
                  class="position-tag"
                >
                  {{ tag }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 学习方案推荐区域 -->
      <div v-if="selectedPosition" class="study-plan-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="section-icon">📚</span>
            推荐学习方案
          </h2>
          <p class="section-description">基于您选择的职位，为您量身定制的学习路径</p>
        </div>

        <div class="study-plans">
          <div 
            v-for="plan in recommendedPlans"
            :key="plan.id"
            class="study-plan-card"
            :class="{ recommended: plan.isRecommended }"
          >
            <div class="plan-header">
              <div class="plan-badge" v-if="plan.isRecommended">推荐</div>
              <h3 class="plan-title">{{ plan.title }}</h3>
              <div class="plan-difficulty">
                <span class="difficulty-label">难度:</span>
                <div class="difficulty-stars">
                  <span 
                    v-for="n in 5" 
                    :key="n"
                    class="star"
                    :class="{ filled: n <= plan.difficulty }"
                  >
                    ★
                  </span>
                </div>
              </div>
            </div>

            <div class="plan-content">
              <p class="plan-description">{{ plan.description }}</p>
              
              <div class="plan-details">
                <div class="detail-item">
                  <span class="detail-icon">⏱️</span>
                  <span class="detail-text">预计学习时间: {{ plan.duration }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-icon">📖</span>
                  <span class="detail-text">课程数量: {{ plan.courseCount }}门</span>
                </div>
                <div class="detail-item">
                  <span class="detail-icon">🎯</span>
                  <span class="detail-text">技能点: {{ plan.skillPoints }}个</span>
                </div>
              </div>

              <div class="plan-skills">
                <h4 class="skills-title">核心技能</h4>
                <div class="skills-list">
                  <span 
                    v-for="skill in plan.skills"
                    :key="skill"
                    class="skill-tag"
                  >
                    {{ skill }}
                  </span>
                </div>
              </div>

              <div class="plan-learning-path">
                <h4 class="path-title">学习路径</h4>
                <div class="learning-steps">
                  <div 
                    v-for="(step, index) in plan.learningPath"
                    :key="index"
                    class="learning-step"
                  >
                    <div class="step-number">{{ index + 1 }}</div>
                    <div class="step-content">
                      <h5 class="step-title">{{ step.title }}</h5>
                      <p class="step-description">{{ step.description }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="plan-actions">
              <button 
                class="btn btn-outline"
                @click="viewPlanDetails(plan)"
              >
                查看详情
              </button>
              <button 
                class="btn btn-primary"
                @click="startLearning(plan)"
              >
                开始学习
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 个人学习进度 -->
      <div v-if="selectedPosition" class="progress-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="section-icon">📊</span>
            学习进度
          </h2>
        </div>

        <div class="progress-overview">
          <div class="progress-card">
            <div class="progress-icon">📈</div>
            <div class="progress-info">
              <h4>总体进度</h4>
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: overallProgress + '%' }"></div>
              </div>
              <span class="progress-text">{{ overallProgress }}%</span>
            </div>
          </div>

          <div class="progress-card">
            <div class="progress-icon">🎯</div>
            <div class="progress-info">
              <h4>技能掌握</h4>
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: skillProgress + '%' }"></div>
              </div>
              <span class="progress-text">{{ skillProgress }}%</span>
            </div>
          </div>

          <div class="progress-card">
            <div class="progress-icon">📚</div>
            <div class="progress-info">
              <h4>课程完成</h4>
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: courseProgress + '%' }"></div>
              </div>
              <span class="progress-text">{{ courseProgress }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StudyPlan',
  data() {
    return {
      selectedCategory: null,
      selectedPosition: null,
      positionCategories: [
        {
          id: 'frontend',
          name: '前端开发',
          icon: '💻',
          description: '专注于用户界面和用户体验的开发'
        },
        {
          id: 'backend',
          name: '后端开发',
          icon: '⚙️',
          description: '专注于服务器端逻辑和数据库管理'
        },
        {
          id: 'fullstack',
          name: '全栈开发',
          icon: '🔧',
          description: '同时掌握前端和后端开发技能'
        },
        {
          id: 'mobile',
          name: '移动开发',
          icon: '📱',
          description: '专注于移动应用开发'
        },
        {
          id: 'data',
          name: '数据科学',
          icon: '📊',
          description: '专注于数据分析和机器学习'
        },
        {
          id: 'devops',
          name: '运维开发',
          icon: '🚀',
          description: '专注于系统部署和运维自动化'
        }
      ],
      positions: [
        // 前端开发职位
        {
          id: 'frontend-junior',
          category: 'frontend',
          name: '初级前端开发工程师',
          icon: '🌱',
          description: '负责基础的前端页面开发和维护',
          tags: ['HTML', 'CSS', 'JavaScript', 'Vue.js']
        },
        {
          id: 'frontend-senior',
          category: 'frontend',
          name: '高级前端开发工程师',
          icon: '🚀',
          description: '负责复杂前端架构设计和性能优化',
          tags: ['React', 'TypeScript', 'Webpack', '性能优化']
        },
        {
          id: 'frontend-lead',
          category: 'frontend',
          name: '前端技术负责人',
          icon: '👑',
          description: '负责前端技术选型和团队技术指导',
          tags: ['架构设计', '团队管理', '技术选型', '代码审查']
        },
        // 后端开发职位
        {
          id: 'backend-junior',
          category: 'backend',
          name: '初级后端开发工程师',
          icon: '🌱',
          description: '负责基础的后端接口开发和数据库操作',
          tags: ['Java', 'Spring Boot', 'MySQL', 'REST API']
        },
        {
          id: 'backend-senior',
          category: 'backend',
          name: '高级后端开发工程师',
          icon: '🚀',
          description: '负责复杂业务逻辑设计和系统架构',
          tags: ['微服务', '分布式', '缓存', '消息队列']
        },
        {
          id: 'backend-lead',
          category: 'backend',
          name: '后端技术负责人',
          icon: '👑',
          description: '负责后端技术架构和团队技术指导',
          tags: ['系统设计', '性能优化', '团队管理', '技术选型']
        },
        // 全栈开发职位
        {
          id: 'fullstack-junior',
          category: 'fullstack',
          name: '初级全栈开发工程师',
          icon: '🌱',
          description: '能够独立完成前后端开发任务',
          tags: ['Vue.js', 'Node.js', 'Express', 'MongoDB']
        },
        {
          id: 'fullstack-senior',
          category: 'fullstack',
          name: '高级全栈开发工程师',
          icon: '🚀',
          description: '负责全栈项目的架构设计和开发',
          tags: ['React', 'Spring Boot', 'Redis', 'Docker']
        },
        // 移动开发职位
        {
          id: 'mobile-react-native',
          category: 'mobile',
          name: 'React Native开发工程师',
          icon: '📱',
          description: '使用React Native开发跨平台移动应用',
          tags: ['React Native', 'JavaScript', 'iOS', 'Android']
        },
        {
          id: 'mobile-flutter',
          category: 'mobile',
          name: 'Flutter开发工程师',
          icon: '📱',
          description: '使用Flutter开发跨平台移动应用',
          tags: ['Flutter', 'Dart', 'iOS', 'Android']
        },
        // 数据科学职位
        {
          id: 'data-analyst',
          category: 'data',
          name: '数据分析师',
          icon: '📊',
          description: '负责数据分析和业务洞察',
          tags: ['Python', 'SQL', 'Excel', '数据可视化']
        },
        {
          id: 'data-scientist',
          category: 'data',
          name: '数据科学家',
          icon: '🧠',
          description: '负责机器学习模型开发和算法优化',
          tags: ['Python', '机器学习', '深度学习', 'TensorFlow']
        },
        // 运维开发职位
        {
          id: 'devops-engineer',
          category: 'devops',
          name: '运维开发工程师',
          icon: '🚀',
          description: '负责系统部署和运维自动化',
          tags: ['Docker', 'Kubernetes', 'CI/CD', '监控']
        }
      ],
      recommendedPlans: [],
      overallProgress: 0,
      skillProgress: 0,
      courseProgress: 0
    }
  },
  methods: {
    selectCategory(categoryId) {
      this.selectedCategory = categoryId
      this.selectedPosition = null
      this.recommendedPlans = []
    },
    selectPosition(positionId) {
      this.selectedPosition = positionId
      this.generateRecommendedPlans(positionId)
      this.loadProgress(positionId)
    },
    getPositionsByCategory(categoryId) {
      return this.positions.filter(position => position.category === categoryId)
    },
    generateRecommendedPlans(positionId) {
      const position = this.positions.find(p => p.id === positionId)
      if (!position) return

      // 根据职位生成推荐学习方案
      const plans = {
        'frontend-junior': [
          {
            id: 'frontend-basics',
            title: '前端基础入门',
            description: '从零开始学习前端开发基础知识，适合完全没有编程经验的初学者',
            difficulty: 2,
            duration: '3-4个月',
            courseCount: 8,
            skillPoints: 12,
            skills: ['HTML基础', 'CSS样式', 'JavaScript语法', 'DOM操作', '响应式设计'],
            learningPath: [
              { title: 'HTML基础', description: '学习HTML标签和语义化' },
              { title: 'CSS样式', description: '掌握CSS布局和样式设计' },
              { title: 'JavaScript基础', description: '学习JavaScript语法和DOM操作' },
              { title: '响应式设计', description: '学习移动端适配和媒体查询' },
              { title: '项目实战', description: '完成一个完整的静态网站项目' }
            ],
            isRecommended: true
          }
        ],
        'frontend-senior': [
          {
            id: 'frontend-advanced',
            title: '前端进阶提升',
            description: '深入学习现代前端开发技术，包括框架使用、性能优化和工程化',
            difficulty: 4,
            duration: '6-8个月',
            courseCount: 15,
            skillPoints: 25,
            skills: ['React/Vue框架', 'TypeScript', 'Webpack', '性能优化', '工程化'],
            learningPath: [
              { title: '框架深入学习', description: '掌握React或Vue的高级特性' },
              { title: 'TypeScript', description: '学习类型系统和高级类型' },
              { title: '构建工具', description: '掌握Webpack、Vite等构建工具' },
              { title: '性能优化', description: '学习前端性能优化技巧' },
              { title: '工程化实践', description: '学习代码规范、测试和部署' }
            ],
            isRecommended: true
          }
        ],
        'backend-junior': [
          {
            id: 'backend-basics',
            title: '后端开发入门',
            description: '学习后端开发基础知识，包括服务器端编程和数据库操作',
            difficulty: 3,
            duration: '4-5个月',
            courseCount: 10,
            skillPoints: 15,
            skills: ['Java基础', 'Spring Boot', 'MySQL', 'REST API', 'Git'],
            learningPath: [
              { title: 'Java基础', description: '学习Java语法和面向对象编程' },
              { title: 'Spring Boot', description: '掌握Spring Boot框架使用' },
              { title: '数据库操作', description: '学习MySQL数据库设计和操作' },
              { title: 'API开发', description: '学习RESTful API设计和开发' },
              { title: '项目实战', description: '完成一个完整的后端项目' }
            ],
            isRecommended: true
          }
        ]
      }

      this.recommendedPlans = plans[positionId] || []
    },
    loadProgress(positionId) {
      // 模拟加载学习进度数据
      // 这里可以根据positionId加载不同的进度数据
      console.log('Loading progress for position:', positionId)
      this.overallProgress = Math.floor(Math.random() * 100)
      this.skillProgress = Math.floor(Math.random() * 100)
      this.courseProgress = Math.floor(Math.random() * 100)
    },
    viewPlanDetails(plan) {
      this.$message.info(`查看学习方案详情: ${plan.title}`)
    },
    startLearning(plan) {
      this.$message.success(`开始学习: ${plan.title}`)
      // 这里可以跳转到具体的学习页面
      this.$router.push('/learn')
    }
  }
}
</script>

<style scoped>
.study-plan-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfd2 100%);
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.header-content {
  max-width: 800px;
  margin: 0 auto;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.title-icon {
  font-size: 3rem;
}

.page-subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin: 0;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.section-icon {
  font-size: 2.2rem;
}

.section-description {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin: 0;
}

/* 职位选择区域 */
.position-selection-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.position-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.position-category {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 2px solid #e0e6ed;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.position-category:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.position-category.active {
  border-color: #3b82f6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 58, 138, 0.1) 100%);
}

.category-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
  border-radius: 50%;
  color: white;
}

.category-info {
  flex: 1;
}

.category-name {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.category-description {
  font-size: 0.95rem;
  color: #7f8c8d;
  margin: 0;
}

.category-arrow {
  font-size: 1.5rem;
  color: #27ae60;
  font-weight: bold;
}

/* 具体职位选择 */
.specific-positions {
  margin-top: 40px;
}

.positions-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 24px;
  text-align: center;
}

.positions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.position-card {
  background: white;
  border: 2px solid #e0e6ed;
  border-radius: 15px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.position-card:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.position-card.selected {
  border-color: #3b82f6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 58, 138, 0.1) 100%);
}

.position-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.position-icon {
  font-size: 1.8rem;
}

.position-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.position-description {
  font-size: 0.95rem;
  color: #7f8c8d;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.position-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.position-tag {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* 学习方案推荐区域 */
.study-plan-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.study-plans {
  display: grid;
  gap: 30px;
}

.study-plan-card {
  background: white;
  border: 2px solid #e0e6ed;
  border-radius: 20px;
  padding: 30px;
  position: relative;
  transition: all 0.3s ease;
}

.study-plan-card.recommended {
  border-color: #27ae60;
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.05) 0%, rgba(46, 204, 113, 0.05) 100%);
}

.study-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.plan-badge {
  position: absolute;
  top: -10px;
  right: 20px;
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.plan-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.plan-difficulty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.difficulty-label {
  font-size: 0.9rem;
  color: #7f8c8d;
}

.difficulty-stars {
  display: flex;
  gap: 2px;
}

.star {
  font-size: 1.2rem;
  color: #ddd;
  transition: color 0.3s ease;
}

.star.filled {
  color: #f39c12;
}

.plan-content {
  margin-bottom: 24px;
}

.plan-description {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.plan-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-icon {
  font-size: 1.2rem;
}

.detail-text {
  font-size: 0.95rem;
  color: #2c3e50;
}

.plan-skills {
  margin-bottom: 24px;
}

.skills-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 12px 0;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.plan-learning-path {
  margin-bottom: 24px;
}

.path-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 16px 0;
}

.learning-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.learning-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.step-number {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 4px 0;
}

.step-description {
  font-size: 0.9rem;
  color: #7f8c8d;
  margin: 0;
  line-height: 1.4;
}

.plan-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.btn {
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.btn-outline {
  background: transparent;
  color: #3b82f6;
  border: 2px solid #3b82f6;
}

.btn-outline:hover {
  background: #3b82f6;
  color: white;
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

/* 学习进度区域 */
.progress-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.progress-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.progress-card {
  background: white;
  border: 2px solid #e0e6ed;
  border-radius: 15px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.progress-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
  border-radius: 50%;
  color: white;
}

.progress-info {
  flex: 1;
}

.progress-info h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 12px 0;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e0e6ed;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: #3b82f6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .study-plan-container {
    padding: 15px;
  }

  .page-title {
    font-size: 2rem;
  }

  .title-icon {
    font-size: 2.5rem;
  }

  .position-selection-section,
  .study-plan-section,
  .progress-section {
    padding: 24px;
  }

  .position-categories {
    grid-template-columns: 1fr;
  }

  .positions-grid {
    grid-template-columns: 1fr;
  }

  .plan-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}
</style>
